<div class="content-section introduction">
    <div class="feature-intro">
        <h1>TabView</h1>
        <p>TabView is a container component to group content with tabs.</p>
    </div>
    <app-demoActions github="tabview" stackblitz="tabview-demo"></app-demoActions>
</div>

<div class="content-section implementation">

    <div class="card">
        <h5>Default</h5>
        <p-tabView>
            <p-tabPanel header="Header I">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-tabPanel>
            <p-tabPanel header="Header II">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-tabPanel>
            <p-tabPanel header="Header III">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-tabPanel>
        </p-tabView>
    </div>

    <div class="card">
        <h5>Programmatic</h5>
        <div style="padding: .5em 0 1em 0">
            <p-button (click)="activeIndex1 = 0" styleClass="p-button-text" label="Activate 1rd"></p-button>
            <p-button (click)="activeIndex1 = 1" styleClass="p-button-text" label="Activate 2rd" [style]="{'margin-left': '.5em'}"></p-button>
            <p-button (click)="activeIndex1 = 2" styleClass="p-button-text" label="Activate 3rd" [style]="{'margin-left': '.5em'}"></p-button>
        </div>
        <p-tabView [(activeIndex)]="activeIndex1">
            <p-tabPanel header="Header I">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-tabPanel>
            <p-tabPanel header="Header II">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-tabPanel>
            <p-tabPanel header="Header III">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-tabPanel>
        </p-tabView>
    </div>

    <div class="card">
        <h5>Disabled</h5>
        <p-tabView>
            <p-tabPanel header="Header I">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-tabPanel>
            <p-tabPanel header="Header II">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-tabPanel>
            <p-tabPanel header="Header III">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-tabPanel>
            <p-tabPanel [disabled]="true" header="Header IV">
            </p-tabPanel>
        </p-tabView>
    </div>

    <div class="card">
        <h5>Custom Headers</h5>
        <p-tabView styleClass="tabview-custom">
            <p-tabPanel>
                <ng-template pTemplate = "header">
                    <i class="pi pi-calendar"></i>
                    <span>Header I</span>
                </ng-template>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-tabPanel>
            <p-tabPanel header="Header II">
                <ng-template pTemplate = "header">
                    <i class="pi pi-user"></i>
                    <span>Header II</span>
                </ng-template>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-tabPanel>
            <p-tabPanel header="Header III">
                <ng-template pTemplate = "header">
                    <i class="pi pi-search"></i>
                    <span>Header III</span>
                    <i class="pi pi-cog"></i>
                </ng-template>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-tabPanel>
        </p-tabView>
    </div>

    <div class="card">
        <h5>Closable</h5>
        <p-tabView id="closableTabView">
            <p-tabPanel header="Header I" [selected]="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-tabPanel>
            <p-tabPanel header="Header II" [closable]="true">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                        voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-tabPanel>
            <p-tabPanel header="Header III" [closable]="true">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                        cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-tabPanel>
        </p-tabView>
    </div>

    <div class="card">
        <h5>Scrollable</h5>
        <div style="padding: .5em 0 1em 0">
            <p-button (click)="activeIndex2 = 0" styleClass="p-button-text" label="Activate 1rd"></p-button>
            <p-button (click)="activeIndex2 = 29" styleClass="p-button-text" label="Activate 30th" [style]="{'margin-left': '.5em'}"></p-button>
            <p-button (click)="activeIndex2 = 49" styleClass="p-button-text" label="Activate 50th" [style]="{'margin-left': '.5em'}"></p-button>
        </div>

        <p-tabView [(activeIndex)]="activeIndex2" [scrollable]="true">
            <p-tabPanel *ngFor="let tab of scrollableTabs;" [header]="tab.title">
                <p>{{tab.content}}</p>
            </p-tabPanel>
        </p-tabView>
    </div>

    <div class="card">
        <h5>Tooltips</h5>
        <p-tabView>
            <p-tabPanel header="Header I" leftIcon="pi pi-calendar" tooltip="1972">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </p-tabPanel>
            <p-tabPanel header="Header II" rightIcon="pi pi-inbox" tooltip="1974">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                        architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                        voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
            </p-tabPanel>
            <p-tabPanel header="Header III" leftIcon="pi pi-user" rightIcon="pi pi-star-fill" tooltip="1990">
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                        cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
            </p-tabPanel>
        </p-tabView>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header ="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;TabViewModule&#125; from 'primeng/tabview';
</app-code>

            <h5>Getting Started</h5>
            <p>Tabview element consists of one or more p-tabPanel elements. Header of the tab is defined using <i>header</i> attribute.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView&gt;
    &lt;p-tabPanel header="Header 1"&gt;
       Content 1
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 2"&gt;
        Content 2
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 3"&gt;
        Content 3
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

            <h5>Dynamic Tabs</h5>
            <p>p-tabPanel components can be generated dynamically using ngFor, note that in this case due to an Angular issue <i>selected</i> property must be enabled manually.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView&gt;
    &lt;p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0"&gt;
        {{item.content}}
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

            <h5>Selection</h5>
            <p>First tab is selected by default, to customize this enable <i>selected</i> property on another panel.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView&gt;
    &lt;p-tabPanel header="Header 1"&gt;
       Content 1
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 2" [selected]="true"&gt;
        Content 2
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 3"&gt;
        Content 3
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

            <h5>Scrollable</h5>
            <p>Enable <i>scrollable</i> property to display buttons at each side of the tab headers that scrolls the tab list.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView [scrollable]="true"&gt;
    &lt;p-tabPanel header="Header 1"&gt;
       Content 1
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 2"&gt;
        Content 2
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 3"&gt;
        Content 3
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

            <h5>Closable</h5>
            <p>When <i>closable</i> attribute is enabled, an icon is displayed to close the tab. <i>onClose</i> event is fired when a tab is closed.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabPanel header="Header Text" [closable]="true"&gt;
    Content 1
&lt;/p-tabPanel&gt;
</app-code>

            <p>If you'd like to control whether a tab can be closed, enable controlClose property which gives you the control
            to decide at <i>onClose</i> event. In this case, the event gets a 3rd parameter called close callback and invoking this function
            actually closes the tab.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView [controlClose]="true" (onClose)="handleClose($event)"&gt;
    &lt;p-tabPanel header="Header Text" [closable]="true"&gt;
        Content 1
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
handleClose(e) &#123;
   if (condition)
       e.close();
&#125;
</app-code>

            <h5>Disabled</h5>
            <p>A tab can be disabled to prevent the content to be displayed by setting the <i>disabled</i> property on a panel.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabPanel header="Header Text" [disabled]="true"&gt;
    Content 1
&lt;/p-tabPanel&gt;
</app-code>

            <h5>Icons</h5>
            <p>Icons can be placed at left and right of a header using <i>leftIcon</i> and <i>rightIcon</i> properties of tabPanel.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabPanel header="Header Text" leftIcon="pi-bell-" rightIcon="pi-bookmark"&gt;;
    Content
&lt;/p-tabPanel&gt;
</app-code>

            <h5>Header Template</h5>
            <p>Header of a tab supports templating to place custom html content instead of strings as well.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabPanel&gt;
    &lt;ng-template pTemplate="header"&gt;Custom Content&lt;/ng-template&gt;
&lt;/p-tabPanel&gt;
</app-code>

            <h5>Programmatic Control</h5>
            <p>Tabs can be controlled programmatically using <i>activeIndex</i> property that defines the index of the active tab.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-button icon="pi pi-chevron-up" (click)="openPrev()"&gt;&lt;/p-button&gt;
&lt;p-button icon="pi pi-chevron-down" (click)="openNext()"&gt;&lt;/p-button&gt;

&lt;p-tabView [(activeIndex)]="index"&gt;
    &lt;p-tabPanel header="Header 1"&gt;
        Content 1
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 2"&gt;
        Content 2
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 3"&gt;
        Content 3
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class TabViewDemo &#123;

    index: number = 0;

    openNext() &#123;
        this.index = (this.index === 2) ? 0 : this.index + 1;
    &#125;

    openPrev() &#123;
        this.index = (this.index === 0) ? 2 : this.index - 1;
    &#125;

&#125;
</app-code>

            <h5>Lazy Loading</h5>
            <p>Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy
            loaded tabpanel contents are cached by default so that upon reselection, they are not created again. You may use cache property on TabPanel to
            configure this behavior. A TabPanel is specified as lazy when there is a ngTemplate with <i>pTemplate</i>="content" in it.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView&gt;
    &lt;p-tabPanel header="Header 1"&gt;
        Content 1
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 2"&gt;
        &lt;ng-template pTemplate="content"&gt;
            Complex Content to Lazy Load
        &lt;/ng-template&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header 3"&gt;
        &lt;ng-template pTemplate="content"&gt;
            Complex Content to Lazy Load
        &lt;/ng-template&gt;
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
</app-code>

            <h5>Properties of TabView</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>activeIndex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the active tab to change selected tab programmatically.</td>
                        </tr>
                        <tr>
                            <td>controlClose</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether tab close is controlled at onClose event or not.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>scrollable</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Properties of TabPanel</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Title of the tabPanel.</td>
                        </tr>
                        <tr>
                            <td>selected</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if tab is active.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When true, tab cannot be activated.</td>
                        </tr>
                        <tr>
                            <td>closable</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if tab can be removed.</td>
                        </tr>
                        <tr>
                            <td>headerStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the tab header.</td>
                        </tr>
                        <tr>
                            <td>headerStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the tab header.</td>
                        </tr>
                        <tr>
                            <td>cache</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether a lazy loaded panel should avoid getting loaded again on reselection.</td>
                        </tr>
                        <tr>
                            <td>tooltip</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Advisory information to display in a tooltip on hover.</td>
                        </tr>
                        <tr>
                            <td>tooltipStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the tooltip.</td>
                        </tr>
                        <tr>
                            <td>tooltipPosition</td>
                            <td>string</td>
                            <td>top</td>
                            <td>Position of the tooltip, valid values are right, left, top and bottom.</td>
                        </tr>
                        <tr>
                            <td>tooltipPositionStyle</td>
                            <td>string</td>
                            <td>absolute</td>
                            <td>Type of CSS position.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onChange</td>
                            <td>
                                event.originalEvent: Click event <br>
                                event.index: Index of the selected tab
                            </td>
                            <td>Callback to invoke on tab change.</td>
                        </tr>
                        <tr>
                            <td>onClose</td>
                            <td>
                                event.originalEvent: Click event <br>
                                event.index: Index of the closed tab <br >
                                event.close: Callback to actually close the tab, only available if controlClose is enabled.
                            </td>
                            <td>Callback to invoke on tab close.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-tabView (onChange)="handleChange($event)"&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
handleChange(e) &#123;
    var index = e.index;
&#125;
</app-code>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Parameters</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>header</td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td>content</td>
                                <td>-</td>
                            </tr>
                        </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>

            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-tabview</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>p-tabview-nav</td>
                            <td>Container of headers.</td>
                        </tr>
                        <tr>
                            <td>p-tabview-selected</td>
                            <td>Selected tab header.</td>
                        </tr>
                        <tr>
                            <td>p-tabview-panels</td>
                            <td>Container panels.</td>
                        </tr>
                        <tr>
                            <td>p-tabview-panel</td>
                            <td>Content of a tab.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>

        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/tabview" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tabview-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Default&lt;/h5&gt;
    &lt;p-tabView&gt;
        &lt;p-tabPanel header="Header I"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/p-tabPanel&gt;
        &lt;p-tabPanel header="Header II"&gt;
            &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
        &lt;/p-tabPanel&gt;
        &lt;p-tabPanel header="Header III"&gt;
            &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
        &lt;/p-tabPanel&gt;
    &lt;/p-tabView&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Programmatic&lt;/h5&gt;
    &lt;div style="padding: .5em 0 1em 0"&gt;
        &lt;p-button (click)="activeIndex1 = 0" styleClass="p-button-text" label="Activate 1rd"&gt;&lt;/p-button&gt;
        &lt;p-button (click)="activeIndex1 = 1" styleClass="p-button-text" label="Activate 2rd" style="&#123;'margin-left': '.5em'&#125;"&gt;&lt;/p-button&gt;
        &lt;p-button (click)="activeIndex1 = 2" styleClass="p-button-text" label="Activate 3rd" style="&#123;'margin-left': '.5em'&#125;"&gt;&lt;/p-button&gt;
    &lt;/div&gt;
    &lt;p-tabView [(activeIndex)]="activeIndex1"&gt;
        &lt;p-tabPanel header="Header I"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
        &lt;/p-tabPanel&gt;
        &lt;p-tabPanel header="Header II"&gt;
            &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
        &lt;/p-tabPanel&gt;
        &lt;p-tabPanel header="Header III"&gt;
            &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
        &lt;/p-tabPanel&gt;
    &lt;/p-tabView&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
&lt;h5&gt;Disabled&lt;/h5&gt;
&lt;p-tabView&gt;
    &lt;p-tabPanel header="Header I"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header II"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header III"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel [disabled]="true" header="Header IV"&gt;
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
&lt;h5&gt;Custom Headers&lt;/h5&gt;
&lt;p-tabView styleClass="tabview-custom"&gt;
    &lt;p-tabPanel&gt;
        &lt;ng-template pTemplate = "header"&gt;
            &lt;i class="pi pi-calendar"&gt;&lt;/i&gt;
            &lt;span&gt;Header I&lt;/span&gt;
        &lt;/ng-template&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header II"&gt;
        &lt;ng-template pTemplate = "header"&gt;
            &lt;i class="pi pi-user"&gt;&lt;/i&gt;
            &lt;span&gt;Header II&lt;/span&gt;
        &lt;/ng-template&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header III"&gt;
        &lt;ng-template pTemplate = "header"&gt;
            &lt;i class="pi pi-search"&gt;&lt;/i&gt;
            &lt;span&gt;Header III&lt;/span&gt;
            &lt;i class="pi pi-cog"&gt;&lt;/i&gt;
        &lt;/ng-template&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
&lt;h5&gt;Closable&lt;/h5&gt;
&lt;p-tabView id="closableTabView"&gt;
    &lt;p-tabPanel header="Header I" [selected]="true"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header II" [closable]="true"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header III" [closable]="true"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Scrollable&lt;/h5&gt;
    &lt;div style="padding: .5em 0 1em 0"&gt;
        &lt;p-button (click)="activeIndex2 = 0" styleClass="p-button-text" label="Activate 1rd"&gt;&lt;/p-button&gt;
        &lt;p-button (click)="activeIndex2 = 29" styleClass="p-button-text" label="Activate 30th" [style]="&#123;'margin-left': '.5em'&#125;"&gt;&lt;/p-button&gt;
        &lt;p-button (click)="activeIndex2 = 49" styleClass="p-button-text" label="Activate 50th" [style]="&#123;'margin-left': '.5em'&#125;"&gt;&lt;/p-button&gt;
    &lt;/div&gt;

    &lt;p-tabView [(activeIndex)]="activeIndex2" [scrollable]="true"&gt;
        &lt;p-tabPanel *ngFor="let tab of scrollableTabs;" [header]="tab.title"&gt;
            &lt;p&gt;&#123;&#123;tab.content&#125;&#125;&lt;/p&gt;
        &lt;/p-tabPanel&gt;
    &lt;/p-tabView&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
&lt;h5&gt;Tooltips&lt;/h5&gt;
&lt;p-tabView&gt;
    &lt;p-tabPanel header="Header I" leftIcon="pi pi-calendar" tooltip="1972"&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header II" rightIcon="pi pi-inbox" tooltip="1974"&gt;
        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="Header III" leftIcon="pi pi-user" rightIcon="pi pi-star-fill" tooltip="1990"&gt;
        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
    &lt;/p-tabPanel&gt;
&lt;/p-tabView&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class TabViewDemo &#123;

    activeIndex1: number = 0;

    activeIndex2: number = 0;

    scrollableTabs: any[] = Array.from(&#123; length: 50 &#125;, (_, i) => (&#123; title: `Tab $&#123;i + 1&#125;`, content: `Tab $&#123;i + 1&#125; Content` &#125;));

&#125;
</app-code>
<app-code lang="css">
:host ::ng-deep .tabview-custom &#123;
    i, span &#123;
        vertical-align: middle;
    &#125;

    span &#123;
        margin: 0 .5rem;
    &#125;
&#125;

:host ::ng-deep .p-button &#123;
    margin-right: .25rem;
&#125;

:host ::ng-deep .p-tabview p &#123;
    line-height: 1.5;
    margin: 0;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tabview-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
